<template>
  <PCard class="tc-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">


    <PCard class="tc-item-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
      :bodyStyle="{ width: '100%' }">
      <div slot="header" class="tc-title">
        <span>税务变更</span>
      </div>
      <div class="tc-item-body">
        <div class="body-item">
          <div class="label">变更前：</div>
          <div class="value">{{ taxModeList[oldTaxMode] }}</div>
        </div>
        <div class="body-item">
          <div class="label">变更后：</div>
          <div class="value">{{ taxModeList[newTaxMode] }}</div>
        </div>
      </div>
    </PCard>

    <PCard class="tc-item-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
      :bodyStyle="{ width: '100%' }">
      <div slot="header" class="tc-title">
        <span>本季度已开票</span>

        <!-- <div class="data-label">
          <div class="label">预计补缴税费：</div>
          <div class="value">3431 元</div>
        </div> -->
      </div>

      <a-table :loading="loading" :columns="columns" class="kkkllll" :data-source="data" :pagination="pagination"
        bordered @change="(...args) => { handleTableChange(0, ...args) }" :scroll="{ x: 800, y: 500 }">

        <div slot="invoiceType" slot-scope="tags" style="max-width: 200px; max-height: 300px; overflow: auto;">
          <!-- 现代服务-字幕制作服务,生活服务-家居产品维保服务 -->
          <a-tag v-for="tag in tags.split(',')" :key="tag" style="margin: 3px;"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
            {{ tag }}
          </a-tag>
        </div>
        <template slot="taxMedium" slot-scope="text">
          {{ { 1: '纸质', 2: "电子" }[text] }}
        </template>
        <template slot="taxType" slot-scope="text">
          {{ { 1: '增值税专用发票', 2: "增值税普通发票" }[text] }}
        </template>
        <template slot="fen2yuan" slot-scope="text">
          {{ fen2yuan(text) }}
        </template>
        <!-- 1 增值税专用发票 2 增值税普通发票 -->
        <!-- <span slot="action" slot-scope="text, record">
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions
            <a-icon type="down" />
          </a>
        </span> -->
      </a-table>
    </PCard>


  </PCard>
</template>

<script>
import { CurrentQuarter,conversionElement } from '@/utils/util'
import getDataForDB from '@/api/qsbBusinessManagement'
const columns = [
  {
    dataIndex: 'taxDate',
    key: 'taxDate',
    title: '开票时间',
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '发票类型',
    dataIndex: 'taxType',// 普通 专用
    colSpan: 2,
    key: 'taxType',
    scopedSlots: { customRender: 'taxType' },
  },
  {
    title: '发票类型',
    dataIndex: 'taxMedium', // 纸质 电子
    colSpan: 0,
    key: 'taxMedium',
    scopedSlots: { customRender: 'taxMedium' },
  },
  {
    title: '开票类目',
    dataIndex: 'invoiceType',
    key: 'invoiceType',
    width: 300,
    scopedSlots: { customRender: 'invoiceType' },
  },
  {
    title: '开票金额',
    key: 'amount',
    dataIndex: 'amount',
    scopedSlots: { customRender: 'fen2yuan' },
  },
  {
    title: '已缴税费',
    key: 'taxMoney',
    dataIndex: 'taxMoney', // taxMoney  personalTaxMoney
    scopedSlots: { customRender: 'fen2yuan' },
  },
  {
    title: '已缴服务费',
    key: 'serviceChargeMoney',
    dataIndex: 'serviceChargeMoney', // taxMoney 
    scopedSlots: { customRender: 'fen2yuan' },
  },
  {
    title: '应补税费',
    key: 'patchTax',
    dataIndex: 'patchTax',
    scopedSlots: { customRender: 'fen2yuan' },
  },
  {
    title: '应补服务费',
    key: 'patchService',
    dataIndex: 'patchService',
    scopedSlots: { customRender: 'fen2yuan' },
    // scopedSlots: { customRender: 'action' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    taxType: 'taxType',
    taxMedium: 'taxMedium',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];




export default {
  naem: 'sipiTaxChanges',
  props: {
    pageInfo: { type: Object }
  },
  data() {
    return {
      taxModeList: {
        1: '查账征收', 2: "核定征收-双定", 3: '核定征收-征收率', 4: '核定征收-应纳税所得率'
      },
      data: [],
      columns,
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
      oldTaxMode: '',
      newTaxMode: '',
      entId: '',
    }
  },
  watch: {
    pageInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          const { pageData, dbData } = val
          dbData && (this.oldTaxMode = dbData.oldTaxMode || '--')
          dbData && (this.newTaxMode = dbData.newTaxMode || '--')
          this.entId = pageData.entId
          this.getDataForTableData(this.entId)
        }
      },
      deep: true,
      immediate: true
    },
  },

  methods: {
    fen2yuan(val){
      return conversionElement(val)
    },
    async getDataForTableData(entId_) {
      this.loading = true
      const cq = CurrentQuarter()
      // 本季度数据
      const param = {
        "data": {
          "entId": entId_, // 209218, //
          bizStatus: 420, //110 102 //
          taxDateStart:cq.StartDate, // 开票开始时间 - 查询使用
          taxDateEnd:cq.EndDate,//开票结束时间 - 查询使用
        },
        "pageNo": this.pagination.current,
        "pageSize": this.pagination.pageSize
      }
      try {
        const res = await getDataForDB('开票列表', param)
        // total  current size
        if (res.code == 200) {
          this.data = res.result.records || []
          this.pagination.current = res.result.current
          this.pagination.total = res.result.total
          this.pagination.pageSize = res.result.size
        }
        console.log('开票列表===>', res);
      } catch (error) {
        console.log('接口 开票列表请求出错，具体原因：', error);
      }
      this.loading = false
    },
    handleTableChange(index, pagination, filters, sorter) {
      // //分页、排序、筛选变化时触发
      this.pagination = pagination;
      this.getDataForTableData(this.entId)
    },
  }
}
</script>

<style lang="less">
.tc-con {
  .card-body {
    padding: 0;
  }

  .tc-item-con {
    .card-body {
      padding: 20px;
    }

    .tc-title {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .data-label {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;

        .value {
          color: #FF6A6A;
        }
      }
    }

    .tc-item-body {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;

      .body-item {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 40px;

        .label {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        .value {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .kkkllll {

      .ant-table-thead>tr>th,
      .ant-table-tbody>tr>td {
        padding: 8px;
      }
    }
  }

}
</style>
